<!-- <template>
    <BeforeNavBar />
    <div class="help">
        
            <div class="sidebar">
                <ul class="liebiao">
                    <div class="wen">
                        <li class="lii"><a href="#" @click.prevent="showContent('content1')" class="wenzi">课程概述</a></li>
                        <li class="lii"><a href="#" @click.prevent="showContent('content2')" class="wenzi">课程结构</a></li>
                        <li class="lii"><a href="#" @click.prevent="showContent('content3')" class="wenzi">学习目标</a></li>
                        <li class="lii"><a href="#" @click.prevent="showContent('content4')" class="wenzi">适合对象</a></li>
                        <li class="lii"><a href="#" @click.prevent="showContent('content5')" class="wenzi">课程内容</a></li>
                        <li class="lii"><a href="#" @click.prevent="showContent('content6')" class="wenzi">学习资源</a></li>
                    </div>
                </ul>
                <div v-if="currentContent === 'content1'" class="neirong">
                    欢迎来到《游戏策划》课程网站！本课程致力于帮助学习者全面理解游戏策划的核心概念和实践技能。我们将深入探讨游戏策划在游戏开发过程中的关键作用，从概念到执行的每个阶段都有涉及。
                </div>
                <div v-if="currentContent === 'content2'" class="neirong">
                    该课程共分为五个模块，每个模块涵盖了游戏策划的不同方面。学生将从基础的游戏概念开始，逐步深入到高级的策划技术和实践中。每个模块之间的内容有机衔接，确保学习效果最大化。
                </div>
                <div v-if="currentContent === 'content3'" class="neirong">在完成本课程后，学生将能够：<br>
理解游戏策划的基本定义和职能；
掌握游戏策划中的关键工具和方法；<br>
能够制定和评估游戏设计文档；
熟悉团队合作和跨部门沟通的重要性；<br>
解决游戏开发中的常见挑战和问题。
                </div>
                <div v-if="currentContent === 'content4'" class="neirong">
                    本课程适合那些对游戏开发过程中策划角色感兴趣的学生和业界从业者。无论是希望进入游戏行业的新人，还是希望扩展知识的专业人士，都能从本课程中受益。
                </div>
                <div v-if="currentContent === 'content5'" class="neirong">
                    模块一：游戏策划概述<br>
游戏策划角色和职能
游戏开发生命周期概述<br>
模块二：游戏概念和设计<br>
游戏概念开发和验证
制定游戏设计文档<br>
模块三：游戏平衡和经济<br>
游戏平衡技术和方法
经济系统设计和分析<br>
模块四：项目管理和团队合作<br>
敏捷开发方法和实践
跨职能团队协作技巧<br>
模块五：市场策略和发布<br>
游戏营销策略和实施
发布和用户反馈管理
                </div>
                <div v-if="currentContent === 'content6'" class="neirong">
                    本课程将提供学生丰富的学习资源，包括但不限于：<br>
推荐阅读书籍和文章链接<br>
视频教程和在线演示<br>
交互式案例分析和游戏模拟<br>
                </div>
            </div>



    </div>

</template>

<script>
import BeforeNavBar from '@/components/BeforeNavBar.vue';


export default {
    name: 'beforehelp',
    components: {

        BeforeNavBar
    },

    data() {
        return {
            currentContent: 'content1',// 初始内容为 content1
        };
    },

    mounted() {

    },
    methods: {
        showContent(contentId) {
            // 实现函数逻辑
            this.currentContent = contentId;
            console.log('显示内容：', contentId);
        },




    }
};
</script>
<style scoped>
.help {
    width: 80%;
    height: 450px;
    background-color: aliceblue;
    margin: auto;
    border-radius: 50px;
    overflow: hidden;
    margin-top: 20px;
}

.knowledge-section {
    height: 450px;
    width: 100%;
    margin: auto;
    border-radius: 50px;
    overflow: hidden;
}


.sidebar {
    width: 100%;
    height: 100%;
    display: flex;
    background: aliceblue;
    border-radius: 50px;
  
    overflow: hidden;
}

.neirong {

    width: 70%;
    height: 90%;
    color: rgba(57, 61, 66, 1);
    /* 设置链接文字颜色为蓝色 */
    padding: 40px;
    text-align: left;
}

.liebiao {
    width: 20%;
    height: 100%;
    background-color: rgb(226, 238, 251);
    border-radius: 50px;
    margin: 0px;
    padding: 0px 20px 0px 20px;
}

.wenzi {
    font-size: 18px;
    font-weight: 400;
    letter-spacing: 0px;
    line-height: 26.06px;
    color: rgba(36, 41, 47, 0.8);
    text-align: left;
    vertical-align: top;
    text-decoration: none;
    padding-left: 20px;
    /* 去除链接的下划线 */


}

.lii {
    margin-top: 20px;
    text-align: left;
    border-bottom: 1px solid rgba(255, 255, 255, 0.608);
    /* 添加白色底部边框 */
}

.liebiao li::after {

    position: absolute;
    /* 绝对定位在列表项下方 */
    left: 0;
    /* 距离左侧为0，即从列表项的最左侧开始 */

    width: 100%;
    /* 下划线宽度与列表项宽度一致 */
    height: 1px;
    /* 下划线高度 */
    color: rgba(255, 255, 255, 0.832);

}

.wen {
    margin-top: 40px;
    width: 100%;
    height: 100%;

}
</style> -->







<template>
     <BeforeNavBar />
    <div class="buju">
      <el-collapse v-model="activeNames" accordion>
        <el-collapse-item title="课程概述" name="1" class="lei">
          <p> 欢迎来到《游戏策划》课程网站！本课程致力于帮助学习者全面理解游戏策划的核心概念和实践技能。我们将深入探讨游戏策划在游戏开发过程中的关键作用，从概念到执行的每个阶段都有涉及。</p>
        </el-collapse-item>
        <el-collapse-item title="课程结构" name="2">
          <p>该课程共分为五个模块，每个模块涵盖了游戏策划的不同方面。学生将从基础的游戏概念开始，逐步深入到高级的策划技术和实践中。每个模块之间的内容有机衔接，确保学习效果最大化</p>
        </el-collapse-item>
        <el-collapse-item title="学习目标" name="3">
          <p>在完成本课程后，学生将能够：
            理解游戏策划的基本定义和职能；
            掌握游戏策划中的关键工具和方法；
            能够制定和评估游戏设计文档；
            熟悉团队合作和跨部门沟通的重要性；
            解决游戏开发中的常见挑战和问题。</p>
        </el-collapse-item>
        <el-collapse-item title="适合对象" name="4">
          <p> 本课程适合那些对游戏开发过程中策划角色感兴趣的学生和业界从业者。无论是希望进入游戏行业的新人，还是希望扩展知识的专业人士，都能从本课程中受益。</p>
        </el-collapse-item>
        <el-collapse-item title="课程内容" name="5">
          <p> 模块一：游戏策划概述<br>
            游戏策划角色和职能
            游戏开发生命周期概述<br>
            模块二：游戏概念和设计<br>
            游戏概念开发和验证
            制定游戏设计文档<br>
            模块三：游戏平衡和经济<br>
            游戏平衡技术和方法
            经济系统设计和分析<br>
            模块四：项目管理和团队合作<br>
            敏捷开发方法和实践
            跨职能团队协作技巧<br>
            模块五：市场策略和发布<br>
            游戏营销策略和实施
            发布和用户反馈管理</p>
        </el-collapse-item>
        <el-collapse-item title="学习资源" name="6">
          <p> 本课程将提供学生丰富的学习资源，包括但不限于：
            推荐阅读书籍和文章链接
            视频教程和在线演示
            交互式案例分析和游戏模拟</p>
        </el-collapse-item>
      </el-collapse>
    </div>
  </template>
  
  <script>
  import BeforeNavBar from '@/components/BeforeNavBar.vue';
  export default {
    name: 'beforehelp',
    components: {

        BeforeNavBar
    },
    data() {
      return {
        activeNames: ['1'] // 默认展开的面板，这里设置为 ['1'] 表示默认展开第一个面板
      };
    }
  };
  </script>
  
  <style>
  /* 可以添加一些自定义的样式 */
  .buju {
    width: 80%;
    margin: auto;
    padding-top: 20px;
  
  }
  
  .buju .el-collapse-item {
    background-color: aliceblue !important;
    border-radius: 15px !important;
    margin-bottom: 5px;
  }
  
  .buju .el-collapse-item__header {
    background-color: aliceblue !important;
    border-radius: 15px !important;
  }
  
  .buju .el-collapse-item__wrap {
    padding: 10px !important;
  }
  .el-collapse-item__header {
    font-size: 15px !important; /* 设置标题文字大小 */
    color: #333 !important; /* 设置标题文字颜色 */
    /* font-weight: bold !important;  */
    background-color: #f0f0f0 !important; /* 设置标题背景颜色 */
    border-radius: 5px !important; /* 设置标题圆角 */
    padding: 10px 15px !important; /* 设置标题内边距 */
  }
  .el-collapse-item__wrap {
    background-color:rgb(248, 250, 252); /* 设置内容区域的背景颜色 */
    padding: 15px; /* 设置内容区域的内边距 */
    border: 1px solid aliceblue; /* 设置内容区域的边框 */
    border-top: none; /* 可选：移除顶部边框 */
    border-radius: 15px; /* 设置内容区域的圆角 */
    
  }
  /* 移除折叠面板展开后的内容区域的黑色边框 */
  .el-collapse-item__wrap.is-active .el-collapse-item__content {
    border-color: transparent; /* 设置为透明，移除黑色边框 */
  }
  
  </style>
  